<template>
  <div>
    <van-nav-bar
      title="编辑资料"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 2.0 用户头像 -->
    <div class="avatar">
      <!-- 文件上传完毕后会触发 after-read 回调函数 -->
      <van-uploader :after-read="afterRead">
        <img
          v-if="head_img"
          class="avatar_image"
          :src="$baseURL + head_img"
          alt=""
        />
        <img
          v-else
          class="avatar_image"
          src="@/assets/微信图片_20201226165717.jpg"
          alt=""
        />
      </van-uploader>
    </div>
    <div class="divider"></div>
    <!-- 3.0 用户信息单元格 -->
    <van-cell-group>
      <van-cell
        title="昵称"
        :value="nickname"
        is-link
        @click="nickNameShow = true"
      />
      <van-cell
        title="密码"
        value="*****"
        is-link
        @click="passwordShow = true"
      />
      <van-cell
        title="性别"
        :value="gender === 0 ? '女' : '男'"
        is-link
        @click="genderShow = true"
      />
    </van-cell-group>
    <!-- Dialog 弹出框 -->
    <!-- 修改昵称 -->
    <van-dialog
      v-model="nickNameShow"
      title="修改昵称"
      show-cancel-button
      @confirm="upDateInfoHandle('nickname', nicknameTemp)"
    >
      <van-field
        v-model="nicknameTemp"
        label="昵称"
        placeholder="请输入新昵称"
      />
    </van-dialog>

    <!-- 修改密码 -->
    <van-dialog
      v-model="passwordShow"
      title="修改密码"
      show-cancel-button
      @confirm="upDateInfoHandle('password', passwordTemp)"
    >
      <van-field
        type="password"
        v-model="passwordTemp"
        label="密码"
        placeholder="请输入新密码"
      />
    </van-dialog>

    <!-- ActionSheet 动作面板 -->
    <!-- 
      van-action-sheet 组件属性解读
        v-model="genderShow"           布尔值，是否显示动作面板
        :actions="genderActions"       数组，动作面板显示的数据
        @select="genderSelectHandle"   点击某个选项的时候触发的事件处理函数
        close-on-click-action          点击某个选项的时候自动关闭动作面板
        cancel-text="取消"             显示取消按钮
    -->
    <van-action-sheet
      v-model="genderShow"
      cancel-text="取消"
      :actions="genderActions"
      @select="genderSelectHandle"
      close-on-click-action
    >
    </van-action-sheet>
    <div class="divider"></div>
    <van-button block type="default" @click="logOutHandle">退出登录</van-button>
  </div>
</template>

<script>
import { getUserInfo, remomveUserInfo, removeToken } from "@/utils/myToken";
import { uploadFile, userDetail, userUpdate } from "@/api";
export default {
  data() {
    return {
      nickname: "",
      head_img: "",
      gender: 0,
      // 用户 id 保存起来方便以后修改的时候使用
      id: 0,
      nickNameShow: false,
      // 临时的昵称，当用户点击确定的时候才更新昵称
      nicknameTemp: "",
      passwordShow: false,
      passwordTemp: "",
      genderShow: false,
      genderActions: [
        { name: "帅哥", gender: 1 },
        { name: "美女", gender: 0 },
      ],
    };
  },
  methods: {
    //退出登录按钮
    logOutHandle() {
      // console.log('点击了')
      // 1. 在用户信息页添加  退出登录按钮，并给按钮绑定点击事件。
      // 2. 清除本地存储中的 Token
      removeToken();
      // 3. 清除本地存储中的用户信息。
      remomveUserInfo();
      // 4. 路由替换到首页（具体退出后需要跳转到哪个页面问产品经理）。
      // replace 这里使用替换成首页，替换后，后退就不要再回到个人中心页了
      this.$router.replace("/");
    },

    // 性别
    // 获取动作面板数据的事件处理函数，从形参 e 中解构出 { gender }，用于更新性别
    genderSelectHandle({ gender }) {
      // console.log(gender)
      this.upDateInfoHandle("gender", gender);
    },
    // 更新用户资料的函数
    upDateInfoHandle(key, value) {
      userUpdate({
        id: this.id,
        // 这里的参数不能写死，需同时实现更新 昵称 和 密码
        [key]: value,
      }).then((res) => {
        // console.log(res)
        // 重新获取用户资料并且在页面中更新
        this.getCurrUserDetail();
        // 弹出修改成功的提示框
        this.$toast.success(res.data.message);
      });
    },
    // nickNameHandle(){
    //   // console.log('我点击了按钮')
    //   // 1. 获取到临时昵称
    //   // 2. 发送请求临时昵称更新到服务器(接口)，变成新的昵称
    //   userUpdate({
    //     id:this.id,
    //     nickname:this.nicknameTemp
    //   })
    //   .then((res) => {
    //     // 3. 获取最新用户资料
    //     // console.log(res)
    //     this.getCurrUserDetail()
    //   })
    // },
    // //更新密码
    // passwordHandle(){
    //   // console.log('被调用了')
    //   userUpdate({
    //     id:this.id,
    //     password:this.passwordTemp
    //   })
    //   .then((res) => {
    //     // console.log(res)
    //     this.getCurrUserDetail()
    //   })
    // },
    //文件上传完毕后会触发 afterRead 函数
    /* 
      content 参数为 base64 的图片
        - 常用于本地预览，对应的业务一般是，点击上传按钮后才上传真实的图片参数
      file 参数为 文件对象
        - 记得配合 formData 对象使用，通过 append 把图片对象添加到 formData 中
    */
    afterRead({ content, file }) {
      // console.log(file)
      // this.head_img = content
      // 我们项目中如何实现修改图片功能
      // 1. 获取到用户上传的图片对象 { file }
      // 2. 准备把图片对象上传到服务器 formdata 对象
      const fd = new FormData();
      fd.append("file", file);
      // 3. 从服务的返回的数据中，获取到图片的相对路径
      uploadFile(fd).then((res) => {
        // console.log(res)
        const head_img = res.data.data.url;
        // 把最新的图片路径展示到模板中
        this.head_img = head_img;
        //更新用户头像数据
        // 最后记得更新用户头像数据，否则：会出现页面刷新的时候还是原来的头像的bug
        userUpdate({
          id: this.id, // id 为必传参数
          head_img: head_img, //把最新的图片相对路径更新到用户信息中
        }).then((res) => {
          // console.log(res)
          if (res.data.message === "修改成功") {
            this.$toast.success("更新头像成功");
          }
        });
      });
    },
    //获取当前用户详情数据
    getCurrUserDetail() {
      //从本地存储中获取用户id
      const { id } = getUserInfo();
      // 把获取到的 id 保存到 data 中，方便其他地方使用
      this.id = id;
      //根据用户id发送请求获取用户详情数据
      userDetail(id).then((res) => {
        console.log(res);
        // 从返回值中提取出需要呈现在页面的数据
        const { nickname, head_img, gender } = res.data.data;
        this.nickname = nickname;
        this.gender = gender;
        this.head_img = head_img;
      });
    },
  },
  //组件加载完毕
  mounted() {
    this.getCurrUserDetail();
  },
};
</script>

<style lang="less" scoped>
.avatar {
  height: 170px;
  display: flex;
  justify-content: center;
  align-items: center;
  .avatar_image {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px solid #ddd;
    // object-fit：CSS3 可以让图片不变形
    object-fit: cover;
  }
}
</style>